<template>
	<view>
		<unio2o-banner v-if="bannerList.length > 0" :banner="bannerList"></unio2o-banner>
		<view class="unio2o-icons pt30 bg-w">
			<view class="plr30">
				<view class="unio2o-icon-grid">
					<view v-for="(item, index) in iconItems" :key="index" class="icon-grid-item"
						@click="navigateTo(item.url)">
						<app-icon :name="item.icon" type="iconfont" size="48" :background-color="item.bgColor" border-radius="20" padding="20" :color="item.color || '#333'" />
						<view class="text-center ft12 mt15 text-main">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pt30 mt20 bg-w">
			<view class="flex space alcenter plr30">
				<view class="ft20 text-main ftw600">今日推荐</view>
				<view class="text-theme ft14">
					<navigator url="/pages/tuan/today">
						<text>更多</text>
						<!-- 使用新的图标组件 -->
						<app-icon name="icon_right" type="iconfont" size="24" custom-class="scale6" />
					</navigator>
				</view>
			</view>
			<view>
				<swiper :indicator-dots="false" class="unio2o-rec" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(group, index) in groupedGoods" :key="index">
						<view class="flex space pd30">
							<view v-for="(item, itemIndex) in group" :key="item.id" class="rec-item">
								<unio2o-tuan-rec :rec-item="item"></unio2o-tuan-rec>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 分销商品推荐 -->
		<view class="pd30 bg-w mb20">
			<view class="flex space alcenter mb30">
				<view class="ft20 text-main ftw600">热销商品</view>
				<view class="text-theme ft14">
					<navigator url="/pages/distribution/products">
						<text>更多</text>
						<app-icon name="icon_right" type="iconfont" size="24" custom-class="scale6" />
					</navigator>
				</view>
			</view>

			<view class="hot-goods-list">
				<view v-for="(item, index) in hotGoods" :key="index" class="hot-goods-item" @click="goToGoods(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-title">{{ item.title }}</view>
						<view class="goods-price">¥{{ item.price }}</view>
						<view class="goods-commission">佣金{{ item.commissionRate }}%</view>
						<view class="goods-stats">{{ item.sales }}人已购买</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 发布商品入口 -->
		<view class="pd30 bg-w mb20">
			<view class="publish-entry">
				<view class="entry-info">
					<view class="entry-title">发布商品赚钱</view>
					<view class="entry-desc">发布商品，让更多人帮你销售</view>
				</view>
				<button class="btn-publish" @click="goToPublish">立即发布</button>
			</view>
		</view>

		<view class="mt20 pd30 bg-w">
			<view class="flex space alcenter">
				<view class="ft20 text-main ftw600">附近抢购</view>
				<view @click="tuanAct" class="text-theme ft14">
					<text>更多</text>
					<app-icon name="icon_right" type="iconfont" size="24" custom-class="scale6" />
				</view>
			</view>

			<view class="flex space alcenter mt20">
				<view class="tag-type bg-main ft14 text-w">人气爆棚</view>
				<view class="tag-type bg-info ft14 text-info">最新上架</view>
				<view class="tag-type bg-info ft14 text-info">优惠特卖</view>
				<view class="tag-type bg-info ft14 text-info">好评优先</view>
			</view>

			<view class="mt30">
				<view class="mb50" v-for="(item, index) in nearbyGoods" :key="index">
					<unio2o-tuan-list :item="item"></unio2o-tuan-list>
				</view>
				<view class="mb50">
					<unio2o-tuan-ad :ad-list="homeAdData"></unio2o-tuan-ad>
				</view>

				<view class="unio2o-load-more pd30 flex alcenter center ft16 text-load-more">
					<!-- 使用图标组件 -->
					<app-icon name="icon_loading" type="iconfont" size="32" custom-class="loading" />
					<text class="ftw600 ml20">加载更多</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import unio2oTuanList from '@/components/module/tuan/list.vue';
import unio2oTuanAd from '@/components/module/tuan/ad.vue';
import unio2oBanner from '@/components/base/banner/banner.vue';
import unio2oTuanRec from '@/components/module/tuan/rec.vue';
export default {
	components: {
		unio2oTuanList,
		unio2oTuanAd,
		unio2oBanner,
		unio2oTuanRec
	},
	computed: {
		// 动态分组商品，每组2个
		groupedGoods() {
			const groups = [];
			for (let i = 0; i < this.todayRecGoods.length; i += 2) {
				groups.push(this.todayRecGoods.slice(i, i + 2));
			}
			return groups;
		}
	},
	data() {
		return {
			// banner数据
			bannerList: [
				{
					id: 1,
					image: 'https://picsum.photos/seed/homebanner1/750/300.jpg',
					url: '/pages/goods/detail?id=1',
					title: '首页特惠活动'
				},
				{
					id: 2,
					image: 'https://picsum.photos/seed/homebanner2/750/300.jpg',
					url: '/pages/distribution/products',
					title: '热门推荐商品'
				},
				{
					id: 3,
					image: 'https://picsum.photos/seed/homebanner3/750/300.jpg',
					url: '/pages/tuan/today',
					title: '团购优惠专区'
				}
			],
			iconItems: [
				// 第一行图标
				{
					icon: 'icon_hot1',
					name: '热销商品',
					url: '/pages/distribution/products',
					row: 1,
					color: '#ff4757',
					bgColor: '#fff5f5'
				},
				{
					icon: 'iconbtn_upload',
					name: '发布商品',
					url: '/pages/goods/publish',
					row: 1,
					color: '#1e90ff',
					bgColor: '#f0f8ff'
				},
				{
					icon: 'icon_diamond',
					name: '分销赚钱',
					url: '/pages/distribution/my-distribution',
					row: 1,
					color: '#ffa502',
					bgColor: '#fff9e6'
				}, {
					icon: 'icon_balance_des',
					name: '佣金管理',
					url: '/pages/distribution/commission',
					row: 1,
					color: '#2ed573',
					bgColor: '#e6ffed'
				}, {
					icon: 'iconbtn_sahre',
					name: '邀请好友',
					url: '/pages/distribution/team',
					row: 1,
					color: '#ff6348',
					bgColor: '#fff2f0'
				},
				// 第二行图标
				{
					icon: 'icon_notice',
					name: '每日上新',
					url: '',
					row: 2,
					color: '#576574',
					bgColor: '#f5f6fa'
				},
				{
					icon: 'icon_quan1',
					name: '9.9套餐',
					url: '',
					row: 2,
					color: '#8395a7',
					bgColor: '#f8f9fa'
				},
				{
					icon: 'icon_integral_detail',
					name: '积分商城',
					url: '',
					row: 2,
					color: '#5f27cd',
					bgColor: '#f3e5f5'
				},
				{
					icon: 'icon_plus_detail',
					name: '每日签到',
					url: '',
					row: 2,
					color: '#00d2d3',
					bgColor: '#e0f7fa'
				},
				{
					icon: 'iconbtn_more',
					name: '全部',
					url: '',
					row: 2,
					color: '#6c5ce7',
					bgColor: '#f5f6fa'
				}
			],
			hotGoods: [
				{
					id: 1,
					title: '豪华双人汉堡套餐',
					price: 39.9,
					commissionRate: 25,
					image: 'https://picsum.photos/seed/hot1/300/300.jpg',
					sales: 256
				},
				{
					id: 2,
					title: '专业SPA护理套餐',
					price: 188,
					commissionRate: 20,
					image: 'https://picsum.photos/seed/hot2/300/300.jpg',
					sales: 89
				},
				{
					id: 3,
					title: '健身房月卡',
					price: 299,
					commissionRate: 15,
					image: 'https://picsum.photos/seed/hot3/300/300.jpg',
					sales: 156
				},
				{
					id: 4,
					title: '亲子乐园套票',
					price: 88,
					commissionRate: 30,
					image: 'https://picsum.photos/seed/hot4/300/300.jpg',
					sales: 178
				}
			],
			homeAdData: [{
				title: '会员专享-精品酒店双人套餐',
				price: 899,
				originalPrice: 1688,
				discount: '5.3',
				distance: '4.6km',
				type: 'multiple',
				images: [
					'https://picsum.photos/seed/homead1/300/300.jpg',
					'https://picsum.photos/seed/homead2/300/300.jpg',
					'https://picsum.photos/seed/homead3/300/300.jpg'
				]
			}],
			nearbyGoods: [
				{ id: 901, title: '附近火锅套餐', image: 'https://picsum.photos/seed/nearby1/300/300.jpg', price: 198, originalPrice: 298, discount: 6.6, memberBack: 5, promoteReward: 10, store: { name: '老张火锅' }, count: 238, promotionCount: 119, commissionAmount: 15, memberReturn: 5 },
				{ id: 902, title: '健身月卡特惠', image: 'https://picsum.photos/seed/nearby2/300/300.jpg', price: 299, originalPrice: 468, discount: 6.4, memberBack: 9, promoteReward: 18, store: { name: '动力健身' }, count: 156, promotionCount: 78, commissionAmount: 25, memberReturn: 9 },
				{ id: 903, title: 'SPA护理套餐', image: 'https://picsum.photos/seed/nearby3/300/300.jpg', price: 398, originalPrice: 598, discount: 6.7, memberBack: 12, promoteReward: 25, store: { name: '优雅SPA' }, count: 123, promotionCount: 62, commissionAmount: 35, memberReturn: 12 }
			],
			// 今日推荐商品数据
			todayRecGoods: [
				{ id: 101, title: '卡夫卡少儿免费公开课', image: 'https://picsum.photos/seed/rec1/300/300.jpg', price: 29, originalPrice: 59, salesCount: 200, commissionRate: 25, commissionAmount: 50 },
				{ id: 102, title: '精品牛排双人套餐', image: 'https://picsum.photos/seed/rec2/300/300.jpg', price: 168, originalPrice: 298, salesCount: 156, commissionRate: 20, commissionAmount: 33 },
				{ id: 103, title: '电影票特惠套餐', image: 'https://picsum.photos/seed/rec3/300/300.jpg', price: 88, originalPrice: 158, salesCount: 328, commissionRate: 15, commissionAmount: 50 },
				{ id: 104, title: '瑜伽体验课3次', image: 'https://picsum.photos/seed/rec4/300/300.jpg', price: 99, originalPrice: 199, salesCount: 125, commissionRate: 30, commissionAmount: 29 },
				{ id: 105, title: '儿童乐园通票', image: 'https://picsum.photos/seed/rec5/300/300.jpg', price: 68, originalPrice: 128, salesCount: 267, commissionRate: 30, commissionAmount: 20 },
				{ id: 106, title: '美发造型套餐', image: 'https://picsum.photos/seed/rec6/300/300.jpg', price: 128, originalPrice: 238, salesCount: 98, commissionRate: 30, commissionAmount: 38 }
			]
		}
	},
	methods: {
		tuanAct() {
			this.$emit('linkMore', true);
		},
		goToGoods(id) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${id}`
			});
		},
		goToPublish() {
			uni.navigateTo({
				url: '/pages/goods/publish'
			});
		},
		navigateTo(url) {
			if (url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
}
</script>

<style>
.unio2o-icon-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20rpx;
	row-gap: 30rpx;
}

.icon-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
	transition: transform 0.2s ease;
}

.icon-grid-item:active {
	transform: scale(0.95);
}

.icon-grid-item:active .icon-wrapper {
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 第二行图标的样式 */
.icon-grid-item:nth-child(n+6) .icon-item {
	font-size: 36rpx;
	color: #666;
}

.unio2o-rec {
	height: 558rpx;
}

.rec-item {
	width: calc(50% - 16rpx);
}

.hot-goods-list {
	display: flex;
	overflow-x: auto;
	gap: 20rpx;
	padding: 10rpx 0;
}

.hot-goods-item {
	flex-shrink: 0;
	width: 220rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 15rpx;
}

.hot-goods-item .goods-image {
	width: 100%;
	height: 180rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}

.hot-goods-item .goods-title {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 8rpx;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hot-goods-item .goods-price {
	font-size: 26rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.hot-goods-item .goods-commission {
	font-size: 22rpx;
	color: #ff6348;
	background: rgba(255, 99, 72, 0.1);
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
	display: inline-block;
	margin-bottom: 8rpx;
}

.hot-goods-item .goods-stats {
	font-size: 22rpx;
	color: #999;
}

.publish-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12rpx;
	padding: 30rpx;
	color: white;
}

.entry-info {
	flex: 1;
}

.entry-title {
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.entry-desc {
	font-size: 24rpx;
	opacity: 0.9;
}

.btn-publish {
	background: white;
	color: #667eea;
	border: none;
	border-radius: 25rpx;
	padding: 15rpx 30rpx;
	font-size: 26rpx;
	font-weight: 600;
}
</style>